/*
 * @Author: your name
 * @Date: 2021-06-18 11:10:44
 * @LastEditTime: 2021-06-27 11:13:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \黑马头条\totiao\src\router\index.js
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index.js'
// 导入登录的组件页面
import Login from '../views/Login/Login.vue'
import Main from '../views/Main/Main.vue'
import Home from '../views/Main/Home.vue'
import User from '../views/Main/User.vue'
// 导入搜索的组件
import Search from '../views/Search/Seach.vue'
import SearchResult from '../views/Search/SearchResult.vue'
// 导入文章详情的路由
import ArticleDetail from '../views/ArticleDetail/AeticleDetail.vue'
// 导入用户修改信息的组件
import UserEdit from '@/views/UserEdit/UserEdit.vue'
import Chat from '../views/Chat/Chat.vue'
// 1. 将 VueRouter 本身提供的 $router.push 方法转存到常量中
const originalPush = VueRouter.prototype.push
// 2. 自定义 $router.push 方法，在内部调用原生的 originalPush 方法进行路由跳转；并通过 .catch 捕获错误
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  // 通过 .catch 捕获错误
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)

// 路由规则
const routes = [
  {
    path: '/login',
    component: Login,
    name: 'login'
  },
  {
    path: '/search',
    component: Search,
    name: 'search'
  },
  {
    path: '/search/:kw',
    component: SearchResult,
    name: 'search-result',
    // props : true 表示当前路由开启
    // 开启成功之后.就可以在commponent指向的组件中,通过props接收路由参数
    props: true
  },
  // 编辑用户资料的路由规则
  {
    path: '/user/edit',
    component: UserEdit,
    name: 'user-edit'
  },
  {
    path: '/chat',
    component: Chat,
    name: 'chat'
  },
  {
    path: '/article/:id',
    component: ArticleDetail,
    name: 'article-detail',
    // 开启成功之后.就可以在commponent指向的组件中,通过props接收路由参数
    props: true

  },
  {
    path: '/',
    component: Main,
    // name: 'main',
    children: [
      // 子路由规则
      {
        path: '',
        component: Home,
        name: 'home'
      },
      {
        path: 'user',
        component: User,
        name: 'user'
      }
    ]
  }
]

// 创建路由实例对象
const router = new VueRouter({
  routes
})
// 挂载前置导航
router.beforeEach((to, from, next) => {
  // 判断用户访问的path地址,是否为/user 或 /user/edit
  // 如果是.应该判断用户是否登录了
  // 判断用户是否登录,可以在vuex中读取token 的值,有值,就是登录了,放行
  // 没有就强制跳转到登录页
  if (to.path === '/user' || to.path === ' / user / edit') {
    // 访问的是有权限的页面,需要判断用户是否登录
    const tokenStr = store.state.tokenInfo.token
    if (tokenStr) {
      // 有token放行
      next()
    } else {
      // 1.2 token 不存在，没有登录（操作：强制跳转到登录页）
      // before：没有登录，强制跳转到登录页
      next('/login')

      // now：没有登录，强制跳转到登录页，并携带路由的 "query 查询参数"
      next(`/login?pre=${to.fullPath}`)
    }
  } else {
    // 访问的是没有权限的页面
    next()
  }
})
export default router
